<template>
	<view class="loding" v-if="loding">
		<loading></loading>
	</view>
	<view class="project" v-else>
		<view class="project-item" v-for="item in projectList" :key="item._id" @click="toDetail(item._id)">
			<image :src="item.imgUrl" mode="aspectFill"></image>
			<view>{{item.title}}</view>
		</view>
	</view>
</template>

<script>
	import loading from '../../components/loading.vue'
	export default {
		data() {
			return {
				projectList: [],
				loding: true
			}
		},
		components: {
			loading
		},
		methods: {
			onLoad() {
				this.loding = true,
					console.log(this.loding);
				uniCloud.callFunction({
					name: "projectList",
					data: {},
					success: (res) => {
						this.loding = false,
							console.log(this.loding);
						console.log(res.result.data);
						this.projectList = res.result.data
					},
					fail: (err) => {
						console.log(err);
					}

				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: `../project-detail/project-detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.heart {
		animation: heart 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
	}

	@keyframes heart {
		50% {
			transform: rotate(360deg);
		}

		100% {
			transform: rotate(720deg);
		}
	}

	.heart span {
		height: 64px;
		width: 64px;
		display: block;
		position: absolute;
		background: #3fc1f2;
		border: 1px solid #3fc1f2;
		border-radius: 100%;
	}

	.heart span:nth-child(1) {
		transform: translate(-28px, -28px);
		animation: heart1 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
	}

	@keyframes heart1 {
		60% {
			transform: scale(0.4);
		}
	}

	.heart span:nth-child(2) {
		transform: translate(28px, -28px);
		animation: heart2 2.3s cubic-bezier(0.75, 0, 0.5, 1);
	}

	@keyframes heart2 {
		40% {
			transform: scale(0.4);
		}
	}

	.heart span:nth-child(3) {
		position: relative;
		/* background-color: red; */
		border-radius: 0;
		transform: scale(0.98) rotate(-45deg);
		animation: heart3 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
	}

	@keyframes heart3 {
		50% {
			border-radius: 100%;
			transform: scale(0.5) rotate(-45deg);
		}

		100% {
			transform: scale(0.98) rotate(-45deg);
		}
	}

	.content .shadow {
		position: relative;
		display: block;
		height: 16px;
		width: 64px;
		background: #d9d9d9;
		border: 1px solid #d9d9d9;
		border-radius: 50%;
		top: 50px;
		animation: shadow 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
	}

	@keyframes shadow {
		50% {
			background-color: #f2f2f2;
			transform: scale(0.5);
		}

	}

	.loding {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	.project {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 10rpx;
	}

	.project-item {
		margin: 10rpx 0;
		width: 90%;
		background-color: #f1f1f1;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		height: 160rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;

	}

	.project-item>image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin: 20rpx;
	}

	.project-item>view {
		color: $color-4;
		font-weight: bold;
		font-size: 30rpx;
		width: 500rpx;
		letter-spacing: 1.8rpx;
	}
</style>
